Pro jQuery 2.0 by Adam Freeman

Pro jQuery 2.0 by Adam Freeman

Author:Adam Freeman [Freeman, Adam]
Language: eng
Format: epub, pdf
Tags: Computers & Technology, Programming, Languages & Tools, Web Development & Design, Education & Reference, Computer Science, Programming Languages
ISBN: 9781430263883
Amazon: 1430263881
Publisher: Apress
Published: 2013-10-16T04:00:00+00:00


Creating the Progress Bar

You create a progress bar by selecting a div element and calling the progressbar method, as shown in Listing 18-14.

Listing 18-14. Creating a Progress Bar

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

<script src="jquery-2.0.2.js"></script>

<script src="jquery-ui-1.10.3.custom.js"></script>

<link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />

<script type="text/javascript">

$(document).ready(function () {

$("#progressDiv").progressbar({

value: 21

});

});

</script>

</head>

<body>

<div id="progressDiv"></div>

</body>

</html>

The document contains a div element with an id of progressDiv. To create a progress bar, I must use an empty div element–if the div element has any content, it will affect the layout of the progress bar. I use jQuery to select the progressDiv element and call the jQuery UI progressbar method, passing in a map object to provide the initial configuration. The progress bar supports three settings, which I have described in Table 18-4.

Table 18-4. The Settings for the Progress Bar Widget

Setting Description

disabled If true, the progress bar will be disabled. The default value is false.

value Sets the percentage complete displayed to the user. The default is zero. Set the property to false to display an indeterminate progress bar, as described in the section “Creating an Indeterminate Progress Bar.”

max Sets the maximum value that the progress bar will display. The default is 100.



Download



Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.